<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-tabs>
          <!-- 放置页签 -->
          <el-tab-pane label="角色管理">
            <!-- 新增角色按钮 -->
            <el-row style="height:60px">
              <el-button icon="el-icon-plus" size="small" type="primary" @click="addRole">新增角色</el-button>
            </el-row>
            <!-- 表格 -->
            <el-table :data="roleList">
              <el-table-column label="序号" width="120" type="index" />
              <el-table-column label="角色名称" width="240" prop="name" />
              <el-table-column label="描述" prop="description" />
              <el-table-column label="操作">
                <template v-slot="scope">
                  <el-button size="small" type="success" @click="doAssingPerm(scope.row.id)">分配权限</el-button>
                  <el-button size="small" type="primary" @click="doEdit(scope.row)">编辑</el-button>
                  <el-button size="small" type="danger" @click="doDel(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>

            <el-row type="flex" justify="center" align="middle" style="height: 60px">
              <!-- 分页组件 -->
              <el-pagination
                layout="prev,pager,next"
                :total="total"
                :page-size="roleParams.pagesize"
                :current-page.sync="roleParams.page"
                @current-change="handleCurrentChange"
              />
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
    <!-- 弹窗 -->
    <el-dialog v-if="showdialog" :visible.sync="showdialog" :title="isEdit ? '编辑':'新增' + '部门'" @close="doClose">
      <el-form
        ref="roleFormRef"
        label-position="left"
        label-width="80px"
        :model="roleForm"
        :rules="roleFormRules"
      >
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="roleForm.name" />
        </el-form-item>
        <el-form-item label="角色描述" prop="description">
          <el-input v-model="roleForm.description" />
        </el-form-item>
      </el-form>
      <template slot="footer">
        <el-button type="primary" @click="doSubmit">确定</el-button>
        <el-button @click="doCancle">取消</el-button>
      </template>
      <!-- slot="footer" class="dialog-footer" -->
    </el-dialog>
    <!-- 分配角色弹窗 -->
    <el-dialog :visible.sync="showdialogAssign" title="分配权限">
      <assignPermission
        :cur-id="curId"
        @success="hSuccess"
        @close="hClose"
      />
    </el-dialog>
  </div>
</template>

<script>
import { getRoleList, getRole, getDelRole, getEditRole } from '@/api/settings'
import assignPermission from './assignPermission.vue'
export default {
  components: { assignPermission },
  data() {
    return {
      roleParams: {
        page: 1,
        pagesize: 2
      },
      // 角色列表
      roleList: [],
      // 列表长度
      total: 0,
      // 是否显示弹窗
      showdialog: false,
      // 是否显示分配角色弹窗
      showdialogAssign: false,
      // 表单数据
      roleForm: {
        name: '',
        description: ''
      },
      // 表单校验规则
      roleFormRules: {

        name: [
          { required: true, message: '角色名称为必填项', tirgger: 'blur' }
        ]
      },
      // 是否是编辑框
      isEdit: false,
      // 父传子,分配权限id
      curId: ''

    }
  },
  created() {
    // 获取角色信息
    this.loadRolesList()
  },
  methods: {
    // 加载数据
    async loadRolesList() {
      const { data: res } = await getRoleList(this.roleParams)
      // console.log('角色列表', res)
      // 绑定到data中
      this.roleList = res.data.rows
      this.total = res.data.total
    },
    // 当前页面的改变
    handleCurrentChange(curpage) {
      // console.log(`你点击了第${curpage}页`)
      // 1.更新页码
      this.roleParams.page = curpage
      // 2.重发请求
      this.loadRolesList()
    },
    // 新增角色信息
    addRole() {
      this.showdialog = true
      this.isEdit = false
    },
    // 提交角色信息
    async doSubmit() {
      this.$refs.roleFormRef.validate(async(valid) => {
        if (valid) {
          if (this.isEdit) {
            // 1.发送编辑请求
            const { data: res } = await getEditRole(this.roleForm)
            console.log('更新角色信息', res)
            // 2.提示信息
            this.$message.success(res.message)
            // 关闭弹窗
            this.showdialog = false
            // 更新列表
            this.loadRolesList()
          } else {
            // 1.发送新增请求
            const { data: res } = await getRole(this.roleForm)
            // 新增之后,total+1
            this.total++
            // 在分页中设置:current-page.sync="roleParams.page",获取添加后的页面
            this.roleParams.page = Math.ceil(this.total / this.roleParams.pagesize)
            //   console.log('新增用户', res)
            // 2.提示信息
            this.$message.success(res.message)
            // 3.关闭弹窗
            this.showdialog = false
            // 4.更新角色列表,重新发送请求获取最后一页信息
            this.loadRolesList()
          }
        }
      })
    },
    // 删除角色数据
    async doDel(id) {
      this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // console.log('scope数据', scope)
      // 发送请求
        const { data: res } = await getDelRole(id)
        //   console.log('删除信息', res)
        // 如果是当前页面的最后一条信息,则让page-1
        if (this.roleList.length === 1) {
          let page = this.roleParams.page
          page--
          // 页码不能为0,所以让1和page作比较
          page = Math.max(1, page)
          this.roleParams.page = page
        }
        // 提示信息
        this.$message.success(res.message)
        // 更新请求信息
        this.loadRolesList()
      }).catch(() => {

      })
    },
    // 点击编辑按钮
    doEdit(row) {
      this.showdialog = true
      this.isEdit = true
      this.roleForm = { ...row }
    },
    // 点击取消按钮
    doCancle() {
      this.showdialog = false
    },
    // 重置表单
    doClose() {
      // 1.清空表单
      this.roleForm = {
        name: '',
        description: ''
      }
      // 2.重置表单状态
      this.$refs.roleFormRef.resetFields()
    },
    // 分配权限
    doAssingPerm(id) {
      this.curId = id
      this.showdialogAssign = true
    },
    // 子传父关闭弹窗
    hSuccess() {
      this.showdialogAssign = false
    },
    hClose() {
      this.showdialogAssign = false
    }
  }

}
</script>

<style>

</style>
